<template>
    <div>
        <div class="bg">
            <div class="settings">
                <van-icon name="setting-o" @click="toPage('setting')" />
            </div>
            <div class="user" @click="userHandle('login')">
                <div class="avatar">
                    <van-image round width="60" height="60" v-if="userInfo" :src="userInfo.avatarUrl"/>
                    <van-image round width="60" height="60" v-else  :src="require('../../public/img/avatar.jpg')"/>
                </div>
                <div class="nickName" v-if="userInfo">{{ userInfo.nickName }}</div>
                <div class="nickName" v-else>点击登录</div>
            </div>
            <div class="list">
                <div @click="toPage('collect')">
                    <span v-if="collect">{{ collect.length }}</span>
                    <span v-else>0</span>
                    <span>收藏</span>
                </div>
                <div>
                    <span>0</span>
                    <span>关注</span>
                </div>
                <div>
                    <span>0</span>
                    <span>优惠券</span>
                </div>
            </div>
        </div>
        <!--  全部订单  -->
        <div class="order">
            <div class="title">
                <span>我的订单</span>
                <span @click="toPage('orders')">全部订单 ></span>
            </div>
            <div class="item">
                <div @click="toPage('obligation')">
                    <van-icon name="balance-pay"/>
                    <span>待付款</span>
                </div>
                <div @click="toPage('awaitshipments')">
                    <van-icon name="description"/>
                    <span>代发货</span>
                </div>
                <div @click="toPage('awaitreceiving')">
                    <van-icon name="logistics"/>
                    <span>待收货</span>
                </div>
                <div>
                    <van-icon name="completed"/>
                    <span>已完成</span>
                </div>
            </div>
        </div>
        <!--  我的服务  -->
        <div class="serve">
            <div class="title">我的服务</div>
            <div class="item" @click="toPage('address')">
                <van-icon name="location" color="#03ABD9"/>
                <span>地址管理</span>
                <van-icon name="arrow"/>
            </div>
            <div class="item">
                <van-icon name="like" color="#F15830"/>
                <span>我的收藏</span>
                <van-icon name="arrow"/>
            </div>
            <div class="item">
                <van-icon name="bag" color="#EEC027"/>
                <span>积分商城</span>
                <van-icon name="arrow"/>
            </div>
            <div class="item">
                <van-icon name="coupon" color="#EE6D27"/>
                <span>我的优惠券</span>
                <van-icon name="arrow"/>
            </div>
            <div class="item">
                <van-icon name="service" color="#4227EE"/>
                <span>我的客服</span>
                <van-icon name="arrow"/>
            </div>
            <div class="item">
                <van-icon name="phone" color="#97EE27"/>
                <span>关于我们</span>
                <van-icon name="arrow"/>
            </div>
        </div>
        <!--  Tabbar标签底栏  -->
        <van-tabbar v-model="active" active-color="#F6412D" :fixed="true" :border="true">
            <van-tabbar-item replace to="/index" icon="home-o">主页</van-tabbar-item>
            <van-tabbar-item replace to="/classify" icon="apps-o">分类</van-tabbar-item>
            <van-tabbar-item replace to="/shoppingcart" icon="shopping-cart-o">购物车</van-tabbar-item>
            <van-tabbar-item replace to="/user" icon="contact">我的</van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
    export default {
        name: "User",
        data() {
            return {
                active: 3,
                userInfo: this.$store.state.userInfo ? this.$store.state.userInfo: null,
                total: 0,
                collect: this.$store.state.collect ? this.$store.state.collect : 0
            }
        },
        methods: {
            toPage(name) {
                if (!this.$store.state.token) {
                    this.$toPage('login')
                } else {
                    this.$toPage(name)
                }

            },
            userHandle(name) {
                if (!this.$store.state.token) {
                    this.$toPage('login')
                }
            },

        },
        async created() {
            if (this.$store.state.token) {
                this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
            }


            // 获取收藏列表
            // const get1 = await this.$get('collect/list',{type: 0})
            // console.log(get1.data)
            // console.log(this.$store.state.collect)
        }
    }
</script>

<style lang="less" scoped>
  .bg {
    width: 375px;
    height: 242px;
    background: url("../../public/img/user-bg.jpg");

    .settings {
      margin-right: 14px;
      padding-top: 14px;
      text-align: right;
      font-size: 14px;
      color: #fff;
    }

    .user {
      display: flex;
      flex-direction: row;
      height: 60px;
      line-height: 60px;
      font-size: 14px;
      color: #fff;

      .avatar {
        margin-left: 14px;
        margin-right: 6px;
      }
    }

    .list {
      margin-top: 75px;
      height: 54px;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      font-size: 14px;
      color: #fff;

      > div {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-content: center;
        text-align: center;
      }
    }
  }

  .order {
    margin-top: 14px;
    width: 375px;
    height: 155px;

    .title {
      font-size: 16px;

      :first-child {
        margin-left: 14px;
        margin-top: 7px;
        font-weight: 700;
      }

      :last-child {
        margin-left: 223px;
        font-size: 12px;
      }
    }

    .item {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      height: 58px;

      > div {
        margin-top: 30px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 58px;
        text-align: center;
        font-size: 14px;

        .van-icon {
          font-size: 24px;
        }
      }
    }
  }

  .serve {
    margin-top: 14px;
    width: 375px;
    height: 242px;

    .title {
      margin-left: 14px;
      margin-top: 7px;
      margin-bottom: 13px;
      font-size: 16px;
      font-weight: 700;
    }

    .item {
      margin-left: 21px;
      margin-bottom: 13px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      //align-content: center;
      height: 20px;
      line-height: 19px;
      font-size: 14px;

      > span {
        width: 120px;
        margin-left: -175px;
      }

      .van-icon {
        font-size: 18px;
        line-height: 20px;
      }

      .van-icon-arrow {
        margin-right: 21px;
        font-size: 12px;
      }
    }
  }
</style>
